/*
* 1.使用this.$confirm(optoion) 的方式调用
* 2.传参和默认值：optoion={} 
*	width: 模态框的宽度，默认为'260px',//传入字符串样式-> '260px' 
*	showCancelBtn: 布尔值，默认为true， 是否显示关闭按钮
*	cancel:用户点击关闭按钮调用的函数
*	confirm：用户点击确认按钮触发的函数
*	content：显示的文本内容
* 
 */

import Confirm from '@/components/utils/confirm.vue';

let plugin = {};

//删除dom元素
let removeDom = event => {
	
    event.target.parentNode.removeChild(event.target);

}
plugin.install = function (Vue) {
	const ConfirmConstructor = Vue.extend(Confirm);
	// 在原型上实现close方法
	ConfirmConstructor.prototype.closeConfirm = function () {
		this.visible = false;
		
		this.$el.addEventListener('transitionend', removeDom);
	}
	// 在原型上扩展确认方法
	ConfirmConstructor.prototype.submitConfirm = function () {
		this.visible = false;
		this.$el.addEventListener('transitionend', removeDom);


		this.confirmFn && this.confirmFn();
	}

	Vue.prototype.$confirm = function (option = {}){
		// 将confirm实例挂载到dom上
		var instance = new ConfirmConstructor().$mount(document.createElement('div'));
		

		// 初始化参数
		instance.width = option.width || '260px';
		instance.visiable = true;
		instance.content = option.content || '我是confirm内容';
		instance.showCancelBtn = option.showCancelBtn !== undefined ? option.showCancelBtn : true;
		instance.confirmFn = option.confirm ||  null;
		
		document.body.appendChild(instance.$el);
	} 
}



export default plugin;
